<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>弹丸3.4</title>
    <style>
      .container {
        width: 512px;
        height: 234px
      }
      .container div{
        float: left;
      }
      .left{
        width: 346px;
        height: 224px;
      }
      .left-top{
        width: 336px;
        margin-right: 10px;
        height: 60px;
        background: #00ccff;
      }
      .right {
        width: 166px;
        height: 224px;
        background-color: #99ff00;
      }
      .left-bottom div{
        width: 163px;
        height: 72px;
        margin:10px 10px 0 0;
      }
      .blue {
        background-color: #0066ff;
      }
      .grey {
        background-color: #999999;
      }
      .clearfix::after{
        content: "";
        display: block;
        clear: both;
      }
    </style>
</head>
<body>
<<<<<<< HEAD
  <div id="bigblock">
    <div class="middleone"></div>
    <div class="rightone"></div>
    <div class="fourlittlepieces">
      <div class="oneguy"></div>
      <div class="another"></div>
      <div class="another"></div>
      <div class="oneguy"></div>
=======
  <div class="container clearfix">
    <div class="left">
      <div class="left-top"></div>
      <div class="left-bottom clearfix" >
        <div class="blue"></div>
        <div class="grey"></div>
        <div class="blue"></div>
        <div class="grey"></div>
      </div>
>>>>>>> 1aae9b67bb3a31f0e1a70cbabd7ab2d335d0c09a
    </div>
    <div class="right"></div>
  </div>
</body>
</html>